<template>
	<div style="background-color: #f4fafe;">
		<HeaderCom :header="header"></HeaderCom>
		<div class="main_content">
			<el-card shadow="never" class="box-card">
				<!-- 成绩详情
				<hr style="border: 1px  #d1d1d1;"> -->
				<div>
					<el-row>
						<el-col :span="5" style="color:#5a5a5a;font-size: 16px;font-weight: '黑体';">
							<div style="margin-top: 1.25rem;">试卷名称:测试试卷</div>
							<div style="margin-top: 1.25rem;">考生名称:小明</div>
							<div style="margin-top: 1.25rem;">考试时间:2022 02-22 14:00 -2022 02-22 17:00</div>
						</el-col>
						<el-col :span="5" style="text-align: center;font-size: 1.25rem;">
							<div style="margin-top: 1.875rem;">成绩</div>
							<div style="color:  red;margin-top: 0.625rem;">100分</div>
						</el-col>
						<el-col :span="5" style="text-align: center;font-size: 1.25rem;">
							<div style="margin-top: 1.875rem;">耗时</div>
							<div style="color:  red;margin-top: 0.625rem;">100分</div>
						</el-col>
						<el-col :span="6">
							<div style="margin-left: 6.25rem;">
								<!--建立dom 容器-->
								<div id="main" ref="myChart1"></div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-card>
			
			
			<div style="height: 3.875rem;line-height:3.875rem;margin-left: 10px;color: #03d3bd;font-weight: 600;
			">题目列表</div>
			<el-card shadow="never" style="overflow: scroll;height: 30rem;">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column prop="name" label="题目编号">
					</el-table-column>
					<el-table-column prop="name" label="题目名称">
					</el-table-column>
					<el-table-column prop="address" label="类型" show-overflow-tooltip>
						<template slot-scope="scope">

							<el-button size="mini" style="background-color:#ffaa00;color: white;">单选题</el-button>
							<!-- <el-button type="primary" 　size="mini" v-if="scope.$index%2!=0">判断题</el-button>
							<el-tag type="success" v-if="scope.$index%2==0"><h4>单选题</h4></el-tag>
							<el-tag type="info" v-if="scope.$index%2!=0"><h4>判断题</h4></el-tag> -->
						</template>
					</el-table-column>
					<el-table-column prop="name" label="考生答案">
					</el-table-column>
					<el-table-column prop="name" label="参考答案">
					</el-table-column>
					<el-table-column label="答案结果">
						<template slot-scope="scope">

							<el-button style="background-color: #03d3bd;color: white;" size="mini">已批改</el-button>

						</template>
					</el-table-column>

					<el-table-column prop="address" label="成绩" show-overflow-tooltip>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="220">
						<template slot-scope="scope">

							<el-button style="background-color: #ffaa00;color: white;" size="mini">查看</el-button>
							<!-- <el-button type="success" size="mini" @click="handleClick(scope.row)" v-if="scope.$index%2!=0">批阅</el-button>
				            <el-button type="warning"　size="mini">打回</el-button> -->
						</template>
					</el-table-column>
				</el-table>
			</el-card>
			
		</div>
	</div>
</template>

<script>
	import HeaderCom from '../../../component/HeaderCom.vue'

	export default {
		components: {
			HeaderCom: HeaderCom
		},
		data() {
			return {
				header: "小米的成绩统计",
				tableData: [{
					date: '2016-05-03',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-02',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-08',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-06',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-07',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-08',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-06',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-07',
					name: '王小虎',
					address: '2018401322'
				}
				],
				multipleSelection: []
			}
		},
		mounted() {
			this.Init();
		},
		methods: {
			Init() {
				// alert(12);
				//基于准备好的DOM，初始化ECharts图表
				let myChart = this.$echarts.init(this.$refs.myChart1)
				// var myChart = $echarts.init(document.getElementById("main"));
				//指定图表的配置项和数据
				var option = {
					title: {
						text: '答题情况',
						x: '100px', //设置主标题全部居中
						// backgroundColor: '#B5A642', //设置主标题的背景颜色为黄铜色
						textStyle: { //设置主标题
							fontSize: 18, //设置主标题的字号大小
							fontFamily: "黑体", //设置主标题的字体
							color: "#5a5a5a" //设置主标题的颜色为深兰花色
						},
					},
					tooltip: { //配置提示框组件
						trigger: 'item', //设置提示框的触发方式
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: { //配置图例组件
						x: 'center',
						y: 'bottom',
						data: ['正确数', '错误数']
					},
					toolbox: { //配置工具箱组件
						show: true,
						x: 90, //设置工具箱的水平位置
						y: 4, //设置工具箱的垂直位置
						feature: {
							/*mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: true
							},
							magicType: {
								show: true,
								type: ['pie', 'funnel']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}*/
						}
					},
					color: [' #ffaa00', '#03d3bd', ], //按顺序配置饼图内容颜色，渐变色的话要写出数组
					calculable: true,
					series: [ //配置数据系列及格式组件
						{
							name: '答题情况',
							type: 'pie', //饼图
							radius: ['45%', '90%'], //设置半径[内,外]
							center: ['50%', 50], //设置圆心坐标
							//roseType: 'radius',  //开启半径模式会变成玫瑰图，可以试一试
							width: '10%', // 改整个的大小
							max: 40, // for funnel 漏斗图
							itemStyle: {
								normal: {
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								},
								emphasis: {
									label: {
										show: true
									},
									labelLine: {
										show: true
									}
								}
							},
							data: [{
									value: 2,
									name: '正确数'
								},
								{
									value: 1,
									name: '错误数'
								},

							]
						},

					]
				};
				//使用刚指定的配置项和数据显示图表

				myChart.setOption(option);

			},
			handleSelectionChange() {

			},
			handleSelectionChange()
			{
				
			}
		}
	}
</script>

<style scoped="scoped">
	.main_content {
		margin-left: 3%;
		margin-right: 3%;
		height: 100vh;
		/* font-family: "黑体"; */
		/* background-color: white; */
	}

	.box-card {
		margin-top: 1.25rem;
		height: 12.00rem;

	}

	#main {
		margin: 20px;
		width: 62.5rem;
		height: 12.00rem;
		/* margin-right: 1.25rem; */
	}

	
	
	/* 设置滚动条的样式 */
	::-webkit-scrollbar {
		width: 5px;
	}
	
	/* 滚动槽 */
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 5px;
	}
	
	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}
	
	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(236, 246, 255, 0.4);
	}
	
</style>
